<html>
<head>
<style>
html, body, #main {
   width: 100%;
   height: 100%;
   margin: 0px;
}
#main {
   display: table;
}
#main > div {
   width: 100%;
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}
#letter {
   display: inline-block;
   width: 60%;
   background-image: linear-gradient(#2270e7, #206de8);
   color: white;
   padding: 1em;
   position: relative;
   font-family: "HelveticaNeue", "Helvetica Neue";
   border-radius: 8px;
   text-align: left;
}
#body {
   border-top: 1px solid #eee;
   padding-top: 1em;
}
#body:empty {
   display: none;
}
#recipients {
   margin: top;
}
#recipients:before {
   color: #eee;
   content: "To: ";
}
#attach {
   font-size: small;
   opacity: 0.6;
   font-style: italic;
}
#attach img {
   height: 1em;
   width: auto;
}
#attach:empty {
   display: none;
}
</style>
</head>
<body>
   <div id='main'>
      <div>
         <div id='letter'>
            <p id='recipients'><!--RECIPIENTS--></p>
            <p id='body'><!--BODY--></p>
            <p id='attach'><!--ATTACH--></p>
         </div>
      </div>
   </div>
</body>
</html>
